<template>
    <div class="page-wrap">
        <div class="list">
            <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="getQueryPointsHis">
                <div class="item" v-for="item in list" :key="item.transOrder">
                    <img class="integralImg" v-if="item.remark === '达标积分'" src="@/assets/integral1.png" mode="widthFix" />
                    <img class="integralImg" v-if="item.remark === '调账'" src="@/assets/integral2.png" mode="widthFix" />
                    <img class="integralImg" v-if="item.remark === '积分转让'" src="@/assets/integral3.png" mode="widthFix" />
                    <img
                        class="integralImg"
                        v-if="item.remark !== '积分转让' && item.remark !== '调账' && item.remark !== '达标积分'"
                        src="@/assets/integral3.png"
                        mode="widthFix"
                    />
                    <view class="iuy">
                        <div class="n">
                            {{ item.remark }}
                        </div>
                        <div class="t">
                            {{ item.createTime }}
                        </div>
                    </view>
                    <div class="num">
                        <text v-if="item.fundSymbol === 'SUBTRACT'">-</text>
                        <text v-else>+</text>
                        <text style="margin-left: 5px">{{ item.transAmt }}</text>
                    </div>
                </div>
            </van-list>
        </div>
        <empty v-if="!list.length"></empty>
    </div>
</template>

<script>
import { defineComponent } from 'vue'
import { queryPointsHis } from '@/api/agent'

export default defineComponent({
    name: 'integralDetail',
    setup() {
        const state = reactive({
            list: [],
            finished: false,
            loading: false,
            PageNum: 1
        })
        const getQueryPointsHis = () => {
            queryPointsHis({
                currentPage: state.PageNum
            }).then(res => {
                state.list = state.list.concat(res.object.dataList)
                if (res.object.dataList.length < 10) {
                    state.loading = false
                    state.finished = true
                } else {
                    state.PageNum = state.PageNum + 1
                    state.loading = false
                    state.finished = false
                }
            })
        }
        return {
            ...toRefs(state),
            getQueryPointsHis
        }
    }
})
</script>

<style scoped lang="scss">
.page-wrap {
    padding: 10px;
}
.list {
    border-radius: 10px;
    padding: 0 10px;
    background-color: #ffffff;
    overflow: hidden;
    .item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 20px 0px;
        border-bottom: 1px solid #f2f2f2;

        .iuy {
            flex: 1;
            display: flex;
            align-items: center;
            padding-left: 10px;
            justify-content: space-between;
            .n {
                font-size: 16px;
                font-family: Microsoft YaHei;
                font-weight: 400;
                color: #545454;
                opacity: 1;
            }
            .t {
                font-size: 10px;
                font-family: Microsoft YaHei;
                font-weight: 400;
                color: #9a9a9a;
                opacity: 1;
            }
        }
        .integralImg {
            width: 20px;
        }
        .num {
            width: 100px;
            text-align: right;
            font-size: 14px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #ebcd68;
            opacity: 1;
        }
    }
    .item:last-child {
        border-bottom: none;
    }
}
</style>
